### axios 是什么？怎么使用它，怎么解决跨域？

## 什么是 Axios？

    Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它提供了从浏览器中创建 XMLHttpRequests 的简单方式，并且还支持 Node.js 中的 http 请求。


## axios特点

- 特点:

  - 基于 promise 的异步 ajax 请求库，支持 promise 所有的 API
  - 浏览器端/node 端都可以使用，浏览器中创建 XMLHttpRequests
  - 支持请求／响应拦截器
  - 支持请求取消
  - 可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON 类型的数据
  - 批量发送多个请求
  - 安全性更高，客户端支持防御 XSRF，就是让你的每个请求都带一个从 cookie 中拿到的 key, 根据浏览器同源策略，假冒的网站是拿不到你 cookie 中得 key 的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

- 常用语法：
  - axios(config): 通用/最本质的发任意类型请求的方式
  - axios(url[, config]): 可以只指定 url 发 get 请求
  - axios.request(config): 等同于 axios(config)
  - axios.get(url[, config]): 发 get 请求
  - axios.delete(url[, config]): 发 delete 请求
  - axios.post(url[, data, config]): 发 post 请求
  - axios.put(url[, data, config]): 发 put 请求
  - axios.defaults.xxx: 请求的默认全局配置
  - axios.interceptors.request.use(): 添加请求拦截器
  - axios.interceptors.response.use(): 添加响应拦截器
  - axios.create([config]): 创建一个新的 axios(它没有下面的功能)
  - axios.Cancel(): 用于创建取消请求的错误对象
  - axios.CancelToken(): 用于创建取消请求的 token 对象
  - axios.isCancel(): 是否是一个取消请求的错误
  - axios.all(promises): 用于批量执行多个异步请求
  - axios.spread(): 用来指定接收所有成功数据的回调函数的方法


## Axios 支持哪些请求方法？

    Axios 支持以下请求方法：GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS。

## Axios 的优点是什么？

- 它支持 Promise API，易于使用和集成。
- 它能够拦截请求和响应，方便地进行错误处理、数据转换、授权等操作。
- 它能够取消请求，减少浪费的网络资源。
- 它提供了丰富的配置选项，能够自定义请求头、超时、验证等参数。
- 它支持浏览器和 Node.js 环境，可以实现前后端代码的复用。

## 如何在 Axios 中设置请求超时时间？

可以在配置对象中设置 timeout 选项来设置请求超时时间，单位是毫秒。

```js
axios({
  url: "/api/getData",
  method: "get",
  timeout: 5000, // 设置超时时间为5秒
})
  .then((response) => {
    // 处理响应数据
  })
  .catch((error) => {
    // 处理错误
  });
```

## Axios 如何取消一个请求？

Axios 提供了 CancelToken 和 cancel 方法来实现取消请求。首先，我们需要创建一个 CancelToken 对象，然后将它传递给请求的 config 对象中。然后，我们可以在需要取消请求的地方调用 cancel 方法。

```js
const CancelToken = axios.CancelToken;
let cancel;

axios({
  url: "/api/getData",
  method: "get",
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  }),
})
  .then((response) => {
    // 处理响应数据
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      console.log("请求已取消：", error.message);
    } else {
      console.log("请求失败：", error.message);
    }
  });

// 在需要取消请求的地方调用
cancel("请求已取消");
```

## Axios 如何拦截请求和响应？
Axios 提供了 interceptors 属性，包含了 request 和 response 两个属性。request 属性包含了 use 和 eject 两个方法，response 属性包含了 use、eject、reject 三个方法。通过这些方法，我们可以实现拦截请求和响应，进行一些通用的操作，例如添加请求头、数据转换、错误处理等。

```js 
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
  // 在发送请求之前做些什么
  console.log('请求拦截器被触发：', config);
  return config;
}, function(error) {
  // 对请求错误做

```



## OPTIONS请求方法是什么？
HTTP协议中定义的一种请求方法，它用于向服务器查询某些支持的请求方法、跨域请求是否被允许、服务器支持的认证方式等元信息。

在某些情况下，浏览器会先向服务器发送OPTIONS请求，然后根据服务器的响应来决定是否发送实际的请求。这种情况通常出现在跨域请求时，浏览器会先发起OPTIONS预检请求，如果服务器返回的响应中包含了跨域请求所需的Header信息和状态码，浏览器才会发送实际的请求。

OPTIONS请求方法通常不会对服务器资源做出实际的修改，它的作用主要在于检查服务器的能力和权限。在实际应用中，我们通常不需要自己手动发送OPTIONS请求，这个请求由浏览器自动发送，我们只需要正确配置服务器响应中的Header信息即可。


## 如何实现多个请求成功之后拿到数据再去执行别的异步操作？
